import _ from 'lodash';
import {toJS} from 'mobx';
import * as React from 'react';
import {observer} from 'mobx-react';
import {Modal, Row, Col, Form, Input, Select, message} from 'antd';
import {SelectItem} from '../../../../component/select/Select';
import {InputItem} from '../../../../component/input/Input';
import {adBindMediaTypeStore, listStore, searchStore, AdBindMediaType} from '../AdStore';

const FormItem = Form.Item;

@observer
export class AdBindMediatypeModal extends React.Component<any,any> {
    render() {
        return (
            <Modal
                maskClosable={false}
                title= "绑定广告位"
                onOk={this.ok(this)}
                onCancel={()=>{adBindMediaTypeStore.hide()}}
                width="600"
                visible={adBindMediaTypeStore.visible}
                confirmLoading = {adBindMediaTypeStore.confirmLoading}>
                <AdBindMediatypeBaseForm store={adBindMediaTypeStore}/>
            </Modal>
        )
    }

    ok(me) {
        return function () {
            if(adBindMediaTypeStore.isValid()){
                adBindMediaTypeStore.changeConfirmLoading(true);

                adBindMediaTypeStore.update(_.pick(adBindMediaTypeStore.getValues(),'id','adPositionIds'))
                    .then((data)=>{
                        if(data.success){
                            message.success(data.message,3);
                            adBindMediaTypeStore.hide();
                            listStore.refresh(searchStore);
                        }else{
                            message.error(data.message,3);
                        }

                        adBindMediaTypeStore.changeConfirmLoading(false);
                    })
           }else{
               return false;
           }
        }
    }
}

class AdBindMediatypeBaseForm extends React.Component<{store: AdBindMediaType},any>{
    onChangePosition(me){
        return function(value){
            let store: AdBindMediaType = me.props.store;
            store.valid('adPositionIds',value,!store.fields.adPositionIds.required);
        }
    }
    render(){
        const store:AdBindMediaType = this.props.store;

        const formItemLayout = {
            labelCol: {span: 3},
            wrapperCol: {span: 21}
        }

        return (
            <div>
                <Row type="flex">
                    <Col span={24}>
                        <InputItem myKey="title"
                            {...formItemLayout}
                            title="标题"
                            store={store}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <InputItem myKey="mediaType"
                            {...formItemLayout}
                            title="类型"
                            store={store}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <SelectItem mykey="adPositionIds" 
                            {...formItemLayout}
                            multiple = {true}
                            title="广告位"
                            optionValue = "positionTitle"
                            store={store} 
                            onChange={this.onChangePosition(this)}/>  
                    </Col>
                </Row>
            </div>
        )
    }
}